<template>
	<view class="box">
		<!-- 步骤条 -->
		<view class="set-1">
			<view class="set-2" :key="index" v-for="(item,index) in options" :class="{activate:index === 0}">
				<text class="set2-test">{{item.text1}}</text>
				<view class="set-view">
					<view class="steps_time">{{item?.AcceptTime}} </view>
					<view class="steps_info">{{item?.AcceptStation}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			options: Array, //数据
		},
		methods: {
			// 查看流程
			handleViewProcess() {
				this.$emit('handleShow')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.set-2:last-child::after {
		display: none;
	}

	.set2-test {
		font-size: 26rpx;
		color: #78849e;
	}

	.set-1 {
		margin: 30upx 30upx 0 30upx;
	}

	.set-2 {
		// height: 340rpx;
		border-radius: 26upx;
		// width: 600upx;
		margin-left: 26upx;
		padding-bottom: 74rpx;
		position: relative;

		&:last-child {
			margin-bottom: 0;
		}

		.set-view {
			.steps_title {
				font-size: 32rpx !important;
				color: #333333 !important;
				display: flex;
				align-items: center;
				justify-content: space-between;

				button {
					margin: 0;
					padding: 0;
					background-color: #fff;
					color: #FF943C;
					font-size: 28rpx;

					&::after {
						border: 0;
					}
				}
			}

			.steps_info,
			.steps_time {
				color: #8F8F8F;
				font-size: 24rpx;
			}

			.steps_info {
				padding: 12rpx 0;
				color: #333333;
			}
		}
	}


	.set-2::after {
		content: '';
		/* 必须存在如果没有图标就留空 */
		top: 28rpx;
		/* 定位 距离*/
		border-style: dotted;
		border-left: 1px;
		/* 横线颜色 */
		border-color: #78849e;
		border-width: 7rpx;
		left: -37rpx;
		/* 定位 距离*/
		// height: 100%;
		bottom: 0;
		/* 高度 */
		position: absolute;
		/* 定位 */
	}

	.set-2.activate::before {
		background-color: #FFBF8A;

		// &:before {
		// 	width: 22rpx;
		// 	height: 22rpx;
		// 	border-radius: 50%;
		// 	background-color: #FF943C;
		// }
	}

	.set-2::before {
		z-index: 1;
		content: "";
		/* 必须存在如果没有图标就留空 */
		// background: url(../../static/logo.png) no-repeat;
		// background-size: 66rpx 66rpx;
		// width: 66rpx;
		// height: 66rpx;

		width: 38rpx;
		height: 38rpx;
		border-radius: 50%;
		background-color: #8F8F8F;

		position: absolute;
		/* 定位 */
		left: -52upx;
		/* 移动到左边 */
		font-weight: bold;
		/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
		font-family: "iconfont" !important;
		/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
		font-size: 54upx;
		/* 图标大小 */
		font-style: normal;
		/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
		-webkit-font-smoothing: antialiased;
		/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
		-moz-osx-font-smoothing: grayscale;
		/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	}
</style>